<template>
	<!-- 情况通报创建 -->
	<div>
		<el-form :inline="true" ref="ruleForm" :rules="rules" :model="formParams" class="demo-form-inline" label-position="right" label-width="80px">
			<div class="task">
				<Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
				<div class="taskhead">
					<div class="taskheadSon">
						<div class="taskMidForm">
							<div>
								<el-form-item label="汇报主题:" prop ="title">
									<el-input v-model="formParams.title" placeholder="请输入汇报主题" style="width: 460px;" clearable></el-input>
								</el-form-item>
							</div>
							
							
							<div>
								<el-form-item label="汇报内容:" prop ="content">
									<quill-editor v-model="formParams.content" />
								</el-form-item>
							</div>
						</div>

					</div>
				</div>
				<!-- 附件组件 -->
				<!-- 情况通报附件上传 -->
				<div style="margin-top:20px;">
					<UploadFile 
						:title ="'情况通报附件上传'" :subTitle ="'文件仅支持PDF格式'" :showUploadButton ="true"
						:maxNumber ="8" :maxSize = "1" :fileTypes ="['PDF']" 
						:showDleteButton = "true" :fileData = "fileList" :actionUrl = "actionUrl" 
						@deletefile = "deleteFile"
						@uploadsuccess = "uploadSuccess"/>
				</div>
				
				<div class="sureButton">
					<el-form-item>
						<el-button type="reset" @click="reset" style="margin-right: 10px;">取消</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">提交</el-button>
					</el-form-item>
				</div>
			</div>

		</el-form>
	</div>
</template>
<script>
	import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
	export default {

		components: {
			Breadcrumb,
			UploadFile: () => import('../../comonComponent/uploadFile')
		},
		data() {
			return {
				formParams: {
					title:'', // 汇报主题（必填） 最大长度：255
					content: "", // 通报汇报内容
					id: this.$route.query.id
				},
				rules:{
					title:[{ required: true, message: '请输入汇报主题', trigger: 'change' }],
					content:[{ required: true, message: '请输入汇报内容', trigger: 'change' }]
				},
				Breadcrumb: [{
					name: "监督举报",
					link: ""
				}, {
					name: "日常监督",
					link: ""
				}, {
					name: "情况通报",
					link: ""
				}, {
					name: "情况汇报",
					link: ""
				}],
				fileList: [], //	情况通报附件列表
			};
		},
		computed: {
			//图片获取根路径
			actionUrl() {
				return this.Api.uploadFile;
			},
		},
		created(){
			if(!this.$route.query.id) {
				this.$router.go('-1')
			}
		},
		mounted() {
		},
		methods: {
			
			// 删除文件
			deleteFile (item, index) {
				this.fileList.splice(index, 1)
				this.$message.success(`成功删除文件: ${item.name}`)
			},
			// 文件添加成功
			uploadSuccess (data) {
				this.fileList.push(data)
			},
			//提交
			onSubmit() {
				this.$refs['ruleForm'].validate((valid) => {
					if (valid) {
						let data = JSON.parse(JSON.stringify(this.formParams))
						data.attachList = this.fileList
						if (this.fileList.length === 0) {
							this.$message.warning('请上传附件')
							return
						}
						this.Api.doNotificationReportAdd(data).then(res => {
							if (res && res.code === '0') {
								this.$message.warning(`新建情况通报汇报成功`)
								this.$router.go(-1)
							} else {
								this.$message.warning(res.message)
							}
						})
					} else {
						if (this.fileList.length === 0) {
							this.$message.warning('请上传附件')
							return
						}
					}
				})

			},
			//取消
			reset() {
				//清空formParams
				this.$router.go('-1')
			},
		}
	};
</script>
<style lang="less" scoped>
	.task {
		width: 100%;
		height: 100%;

		.taskhead {
			background-color: #FFFFFF;

			.taskheadSon {
				padding: 20px;

				.taskMidForm {}
			}
		}
		.sureButton {
			padding-top: 24px;
			background-color: #FFFFFF;
			margin-top: 20px;
			height: 56px;
			display: flex;
			justify-content: flex-end;
			align-items: center;

		}
	}

	/deep/.el-button--reset {
		width: 70px;
		height: 36px;
		background: rgba(255, 255, 255, 1);
		border-radius: 3px;
		border: 1px solid rgba(215, 219, 224, 1);
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 22px;
		padding: 0px;
	}

	/deep/.el-button--primary {
		width: 70px;
		height: 36px;
		background: rgba(61, 127, 255, 1);
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 22px;
		padding: 0px;
	}
	
	/deep/.el-icon-date{
		padding-left: 430px;
	}
	/deep/.el-input--prefix .el-input__inner {
	    padding-left: 15px; 
	}
	
</style>
